import React from 'react';
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { observer } from "mobx-react";
import { Wallet_Store_Key } from "@/models/wallet";
import { norInject, INorInjectProps } from "@/models";
import PageList from '@/container/PageList';
import PageContainer from "@/components/PageContainer";
import i18n from 'i18n-js';
import moment from 'moment';
import ListItem from '@/components/ListItem';
import Toast from '@/utils/Toast';
import {
  GStyleSheet,
  DynamicColors,
} from '@/utils/DarkMode';
import arrowIcon from '@/assets/images/arrow.png';
import gizCoinIcon from '@/assets/images/my_recharg_icon_gizwits_beans.png';
import TimeRangeSelectModal from './TimeRangeSelectModal';

const dstyles = GStyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    flexDirection: 'column',
    backgroundColor: DynamicColors.screenBackgroundGaryColor,
  },
  time: {
    color: DynamicColors.normalTextColor,
  },
  listBox: {
    flex: 1,
  },
  listItem: {
    paddingLeft: 15,
    borderBottomColor: DynamicColors.borderBottomColor,
    paddingRight: 15,
    paddingTop: 15,
    paddingBottom: 15,
  },
  listTitle: {
    fontSize: 16,
    color: DynamicColors.titleTextColor,
  },
  listContent: {
    fontSize: 12,
    color: DynamicColors.subTitleTextColor,
    // lineHeight: 16,
  },
  arrowBox: {
    padding: 20,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  arrowIcon: {
    width: 16,
    height: 16,
    marginLeft: 5,
  },
  feeBox: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  }
});

interface IProps extends INorInjectProps {

}

@norInject(Wallet_Store_Key)
@observer
export default class ConsumeRecord extends React.Component<IProps> {

  state = {
    showTimeSel: false,
    dateS: moment().subtract(1, 'months').toDate(),
    dateE: new Date(),
    maxDate: new Date(),
  }


  formatTime = (t, type) => {
    const time = moment(t);
    if (type === 'start') {
      time.hour(0).minute(0).second(0);
    } else {
      time.hour(23).minute(59).second(59);
    }
    return time.format('YYYY-MM-DD HH:mm:ss');
  }

  query = async ({ current }) => {
    // const device = this.props.navigation.getParam('device');
    const { formatTime } = this;
    const { dateS, dateE } = this.state;
    const { wallet } = this.props;
    // const sno = device && device.sno;
    const sno = '';
    await wallet.getConsumeRecord(current, formatTime(dateS, 'start'), formatTime(dateE, 'end'), sno);
  }

  goRecordDetail = (orderNo) => {
    const { wallet } = this.props;
    wallet.setConsumeDetail(orderNo);
    Taro.navigateTo({ url: "/pages/wallet/ConsumeRecordDetail" });
  }

  onShowTimeSel = () => {
    this.setState({ showTimeSel: true });
  }

  hideTimeSel = () => {
    this.setState({ showTimeSel: false });
  }

  onDateConfirm = ({ end, start }) => {
    if (start.getTime() > end.getTime()) {
      // 判断开始时间是否大于结束时间
      Toast.error(i18n.t('START_TIME_CANNOT_LARGE'));
      return;
    }
    this.setState({ dateS: start, dateE: end, showTimeSel: false }, () => {
      this.props.wallet.resetConsumeRecord();
      this.query({ current: 1 });
    });
  }

  renderItem = ({ item, index }) => {
    const styles = dstyles.style;
    const { wallet: { consumePageData } } = this.props;
    const isLast = index === consumePageData.records.length - 1;
    const {
      orderNo,
      consumer,
      tradeType,
      ctime,
      payMoney,
    } = item;
    // 消费类型
    let payText = 'PHONE_CALL_2';
    if (tradeType === 2) {
      payText = 'MESSAGE_SEND';
    }
    return (<ListItem
      style={{ ...styles.listItem, borderBottomWidth: isLast ? 0 : 1 }}
      onPress={() => { this.goRecordDetail(orderNo); }}
      extra={(
        <View style={styles.feeBox}>
          <Image src={gizCoinIcon} style={{ width: 20, height: 20, marginRight: 5 }} />
          <Text style={{ ...styles.listTitle, marginBottom: 0, textAlign: 'right' }}>
            {`-${payMoney}`}
          </Text>
        </View>
      )}
    >
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <Text style={{ ...styles.listTitle, marginBottom: 5 }}>
          {`${i18n.t(payText)}${i18n.t('CONSUME')} ${consumer}`}
        </Text>
        <Text style={styles.listContent}>
          {ctime}
        </Text>
      </View>
    </ListItem>
    );
  }

  render() {
    const { showTimeSel, dateS, dateE, maxDate } = this.state;
    const { wallet: { consumePageData } } = this.props;
    const styles = dstyles.style;

    return (
      <PageContainer style={styles.container} title={i18n.t('CONSUME_RECORD')}>
        <View onClick={this.onShowTimeSel} style={styles.arrowBox}>
          <Text style={styles.time}>
            {moment(dateS).format('YYYY.MM.DD')}
            -
            {moment(dateE).format('YYYY.MM.DD')}
          </Text>
          <Image src={arrowIcon} style={styles.arrowIcon} />
        </View>
        <PageList
          id='consumeRecordList'
          style={{ flex: 1, height: '100%' }}
          renderItem={this.renderItem}
          query={this.query}
          pageModel={consumePageData}
        />
        {showTimeSel ? (
          <TimeRangeSelectModal
            isOpened={showTimeSel}
            onCancel={this.hideTimeSel}
            onConfirm={this.onDateConfirm}
            start={dateS}
            end={dateE}
            maxDate={maxDate}
          />
        ) : null}
      </PageContainer>
    );
  }
}
